
<style lang="scss" scoped>
.scroll {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  ul {
    padding-bottom: 20px
  }
}

.container {
  position: fixed;
  width: 100%;
  top: 0px;
  bottom: 0;
  padding-bottom: 20px;
  -moz-bottom: 20px;
  -ms-bottom: 20px;
  -o-bottom: 20px;
  bottom: 20px;
  .item {
    width: 1000%;
    height: 170px;
    background: #fff;
    position: relative;
  }
  .notMore {
    width: 100%;
    height: 100%;
    padding-top: 50px;
    span {
      font-size: 13px;
      color: rgba(160, 154, 155, 1);
      margin-top: 15px;
    }
    img {
      width: 140px;
      height: 85px;
      display: block;
    }
  }
  .search {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 10px;
    > div {
      height: 32px;
      line-height: 32px;
      background: rgba(243, 243, 243, 1);
      .sraechIcon {
        display: block;
        width: 44px;
        height: 44px;
        background: url("/static/ethel_img/search.png") center center no-repeat;
        background-size: 22px 22px;
        margin-right: 10px;
      }
      form > input{
          width: 100%;
          height: 32px;
          line-height: 32px;
          background: rgba(243, 243, 243, 1);
      }
    }
    > span {
      display: block;
      width: 50px;
      height: 100%;
      line-height: 50px;
      text-align: center;
    }
  }
}
</style>

<template>
  <div class="withdrawal">
    <!-- <ComHeader title="商品列表" leftArrow="true"/> -->
    <div class="container">
      <div class="search flex-display flex-center-align">
        <div class="flex-num-one flex-display flex-center-align">
          <i class="sraechIcon" @click="fnHandleSearch"></i>
          <form onsubmit="return fnHandleSearch" class="flex-num-one">
            <input  placeholder="搜索" id="searchVal" v-model="searchVal">
          </form>
        </div>
        <span @click="fnClose">取消</span>
      </div>
      <scroll
        class="scroll"
        :data="drawalList"
        :pullup="isPullup"
        @scrollToEnd="searchMore"
        ref="suggest"
        v-if="drawalList && drawalList.length"
      >
        <ul class="cart-box" >
          <ProductList
            @fnOpenProDetail="fnOpenProDetail"
            v-for="(item, index) in drawalList"
            :key="index"
            :item="item"
          />
        </ul>
      </scroll>
      <div
          class="notMore flex-display flex-display-column flex-center-align"
          v-if="isLoading && !drawalList.length"
        >
          <img src="/static/ethel_img/shopping_img_em.png">
          <span>暂无商品信息</span>
        </div>
    </div>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import ProductList from "@/common/ProductList";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import { Indicator,Toast } from "mint-ui";
import axios from "axios";
// 是否滑动展开
var expansion = null;
export default {
  data() {
    return {
      searchVal: '', // 搜索值  
      isHasMore: true, // 是否需要上拉加载
      drawalList: [], // 列表数据
      isPullup: true, // 是否需要监听下拉加载
      previous: null, // 是否还有下一页
      page: 1, // 页码
      limit: 10, // 条数
      totalPrice: 0, // 总价格
      isSleectAll: false,
      isLoading: true
    };
  },
  created() {
    document.title = '商品列表'
    // 获取数据
    this.ethelWxUserInfo = this.getlocalStorage(this.companyUnique)
      ? this.getlocalStorage(this.companyUnique)
      : "";
    if (this.ethelWxUserInfo) {
      this.getProList();
    }
  },

  methods: {
    fnClose() {
        this.searchVal = ''
    },
    fnHandleSearch() {
        if(!this.searchVal) {
            Toast('请输入搜索内容');
            return
        }
        api.goodssearch({
            uid: this.ethelWxUserInfo.id,
            search: this.searchVal
        }).catch(result => {
            console.log(result);
            
            if(result.status == 200 && result.data.length) {
                this.isLoading = false
                this.getProList()
            }else {
                this.isLoading = true
                this.drawalList = []
            }
            
        })
    },
    /**
     * @author yang
     * @desc 获取分类商品列表
     */
    getProList() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      console.log(7777);
      api
        .getProductList({
          uid: this.ethelWxUserInfo.id,
          goods_class: this.$route.query.classId
        })
        .catch(result => {
          Indicator.close();
          if (result.status === 200 && result.data.code === 0) {
            this.drawalList = result.data.data;
          }
        });
    },
    /**
     * @author yang
     * @desc 跳转到商品详情页面
     * @param {Number} id 商品id
     */
    fnOpenProDetail(id) {
      this.$router.push({
        path: "goodslist_detail",
        query: {
            id: id
        }
      });
    },
    searchMore() {}
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    ProductList,
    Indicator,
    Toast
  }
};
</script>



